<template>
  <div class="env-bg">
    <el-card class="env-card" :body-style="{padding: '20px'}">
      <span class="card-title">系统参数调整</span>

      <el-form :model="form" label-width="150px">
        <el-form-item label="初始电池电量 (%)">
          <el-slider v-model="form.battery" :min="0" :max="100" show-input />
        </el-form-item>

        <el-form-item label="选择电池">
          <el-select
              v-model="form.batteryId"
              placeholder="请选择电池"
              :loading="isLoading"
              clearable
          >
            <!-- 为每个选项创建独立的 el-tooltip -->
            <el-tooltip
                v-for="battery in batteryOptions"
                :key="battery.batteryId"
                effect="light"
                placement="right"
                :open-delay="200"
                class="force-right-tooltip"
            >
              <template #content>
                <div class="battery-tooltip">
                  <p>最大容量: {{ battery.capacity }}mAh</p>
                  <p>最大输出功率: {{ battery.maxOutputPower }}W</p>
                  <p>最大输入功率: {{ battery.maxInputPower }}W</p>
                </div>
              </template>

              <el-option
                  :label="battery.batteryName"
                  :value="battery.batteryId"
                  v-slot:content
              />
            </el-tooltip>
          </el-select>
        </el-form-item>

        <el-form-item label="当前天气">
          <el-select v-model="form.weather" placeholder="请选择天气">
            <el-option label="晴天" value="sunny" />
            <el-option label="阴天" value="cloudy" />
            <el-option label="雨天" value="rainy" />
            <el-option label="大风" value="windy" />
          </el-select>
        </el-form-item>

        <el-form-item label="负荷模型">
          <el-radio-group v-model="form.loadModel">
            <el-radio-button label="居民" />
            <el-radio-button label="商业" />
            <el-radio-button label="工业" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择电价">
          <el-select
              v-model="form.priceId"
              placeholder="请选择电价"
              :loading="isLoading"
              clearable
          >
              <el-option
                  v-for="electPrice in priceOptions"
                  :label="electPrice.price_name"
                  :value="electPrice.price_id"
              />
          </el-select>
        </el-form-item>

        <el-form-item label="启用峰谷电价">
          <el-switch v-model="form.timePriceEnabled" />
        </el-form-item>

        <el-form-item label="模拟时长">
          <el-select v-model="form.simulationSpan">
            <el-option label="24 小时" value="24h" />
            <el-option label="7 天" value="7d" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">应用参数</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {listBattery} from "../api/system/battery.js";
import {ElMessage} from "element-plus";
import {listInfo} from "../api/system/elecPrice.js";

const form = reactive({
  battery: 60,
  batteryId:'',
  weather: 'sunny',
  loadModel: '居民',
  timePriceEnabled: true,
  simulationSpan: '24h',
  priceId:''
})
const isLoading = ref(false) // 加载状态
const batteryOptions = ref([])  //  []  // 存储后端返回的电池列表
const priceOptions = ref([])  //  []  // 存储后端返回的电价列表
const submitForm = () => {
  console.log('提交参数配置:', form)
  // 可发请求 POST 到后端 /api/config 或更新 Pinia store
}

// 获取电池列表
const getBatteryList = async () => {
  isLoading.value = true
  listBattery().then(res => {
    console.log('获取电池列表成功:', res)
    if (res.data.code === 200) {
      batteryOptions.value = res.data.data || []
    } else {
      ElMessage.error(res.data.message || '获取电池列表失败')
    }
  }).catch(err => {
    ElMessage.error(err.message || '获取电池列表失败')
  }).finally(() => {
    isLoading.value = false
  })
  // try {
  //   // 使用axios或项目中的API模块
  //   const { data } = await $api.get('/batteries') // 替换为实际接口路径
  //
  //   // 处理返回数据
  //   if (data.code === 200) {
  //     batteryOptions.value = data.data || []
  //   } else {
  //     throw new Error(data.message || '获取电池列表失败')
  //   }
  // } catch (error) {
  //   console.error('获取电池列表失败:', error)
  //   ElMessage.error(error.message || '获取电池列表失败')
  // } finally {
  //   isLoading.value = false
  // }
}

const getPriceList = async () => {
  isLoading.value = true
  listInfo().then(res => {
    console.log('获取电价列表功:', res)
    if (res.data.code === 200) {
      priceOptions.value = res.data.data || []
    } else {
      ElMessage.error(res.data.message || '获取电价列表失败')
    }
  }).catch(err => {
    ElMessage.error(err.message || '获取电价列表失败')
  }).finally(() => {
    isLoading.value = false
  })
}
  // try {
  //   // 使用axios或项目中的API模块
// 组件挂载后执行
onMounted(() => {
  getBatteryList()
  getPriceList()
})
</script>

<style scoped>
.env-bg {
  min-height: 100vh;
  background-color: #f9fbfd;
  color: #222;
  font-family: Arial, sans-serif;
  padding: 20px 0;
}
.env-card {
  background: linear-gradient(to bottom right, #e3f2fd, #bbdefb);
  border-radius: 10px;
  border: 1px solid #90caf9;
  margin: 20px auto;
  box-shadow: 0 2px 8px rgba(90, 150, 255, 0.08);
  max-width: 1400px;
  min-height: 700px;
}
.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #1976d2;
  display: block;
  margin-bottom: 20px;
}
/* 强制 Tooltip 显示在右侧 */
.force-right-tooltip .el-tooltip__popper {
  left: auto !important;
  right: 0 !important;
  transform-origin: left center !important;
}
</style>
